<template>
	<view class="project-page">
		<image src="/static/img/banner1.jpg" class="img"></image>
		<!-- <scroll-view class="scroll-menu" scroll-x="true" :scroll-into-view="'scroll'+active">
			<view class="item" v-for="(item,index) in list" :class="item.addClass" :id="'scroll'+index" @tap="select(index)">{{item.name}}</view>
		</scroll-view> -->
		<view class="top">
			<view class="item" v-for="(item,index) in list"  @tap="select(index)" :class="item.addClass">
				<view class="box">
					<span class="iconfont iconshezhi" :class="item.icon"></span>
					<span class="name">{{item.name}}</span>
				</view>
				
			</view>
		</view>
		<view class="main-content">
			<view class="news-main" id="news-main" data-src="news-main">
				<view class="news-content">
					<view class="news-item" v-for="(item,index) in newsList" @tap="goPage('projectContent?id='+item.id)">
						<span class="name">{{item.title}}</span>
						<span class="time iconfont iconrili" :class="item.icon">{{item.createDate}}</span>
					</view>
					<nodata v-show="start && newsList.length==0"></nodata>
				</view>
			</view> 
		</view>
	</view>
</template>

<script>
	import nodata from '@/components/nodata.vue'
	export default {
		components: {nodata},
		data() {
			return {
				list:[
					{name:'继续教育',addClass:'active',type:'1277133382839455744'},
					{name:'研修班',addClass:'',type:'1277133382839455745'},
					{name:'学历教育',addClass:'',type:'1277133382839455746'},
					{name:'行业培训',addClass:'',type:'1277133382839455747'},
					{name:'旅游研学',addClass:'',type:'1277133382839455748'},
					{name:'证书培训',addClass:'',type:'1277133382839455749'},
				],
				active:0,
				type:'1277133382839455744',
				current:0,
				start:false,
				pageNo:1,
				newsList:[
					{title:'习近平为何在辽宁代表团问这些问题?',icon:'iconrili',time:'2020-06-20 12:00:00'},
					{title:'淄博市“流动党校”进农村制度创新改革 走进市“第一书记”派驻村： 沂源县东里镇大沟村',icon:'iconrili',time:'2020-06-20 12:00:00'},
					{title:'这篇随笔是我个人对这种情况解决',icon:'iconrili',time:'2020-06-20 12:00:00'},
					{title:'江远华同志是璧山党校高级讲师，喜欢看书学习、勤于善于思考，马列主义理论知识广泛、功底扎实。',icon:'iconrili',time:'2020-06-20 12:00:00'},
					{title:'这篇随笔是我个人对这种情况解决',icon:'iconrili',time:'2020-06-20 12:00:00'},
				],
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			goPage(url){
				uni.navigateTo({
					url:url
				})
			},
			getList(index){
	            let that = this;
	            this.loading = true;
	            this.$http.get("/f/pageTrainNews?pageNo="+this.pageNo+"&pageSize=20&classifyId="+this.type)
	            .then(function (response) {
	                let list = response.data;
	                that.start = true;
	                that.newsList = list;  
	                  
	            })
	            .catch(function (error) {
	                  // handle error
	                  console.log(error);
	            })
	        },
			back(){
				uni.navigateBack({
				    delta: 2
				});
			},
			search(){

			},
			change(item){
				this.current = item.detail.current;
			},
			goSelect(){
				console.log(222)
			},
			select(index){
				this.active = index;
				this.list.forEach((item,i)=>{
					if(i==index){
						item.addClass = "active"
						this.type = item.type;
						this.getList();
					}
					else{
						item.addClass = ""
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.project-page{
		width:100%;
		height:100%;
		overflow-y:auto;
		.top{
			width:100%;
			padding:0 40rpx;
			padding-top:0rpx;
			box-sizing:border-box;
			margin-top:20rpx;
			background:#ffffff;
			display:flex;
			flex-wrap:wrap;
			

			.item{
				margin-bottom:50rpx;
				display:flex;
				align-items:center;
				justify-content:center;
				.box{
					display:flex;
					align-items:center;
				}
				width:33.3%;
				box-sizing:border-box;
				border-right:1px dashed #e0e0e0;
				height:60rpx;
				.iconfont{
					width:50rpx;
					height:50rpx;
					display:block;
					border-radius:50%;
					line-height:50rpx;
					text-align:center;
					color:#fff;
					background:#1783dd;
					font-size:32rpx;
					margin-right:10rpx;
				}
				.name{
					font-size:28rpx;
					color:#555555;
				}
			}
			.item:nth-child(3n){
				border-right:0;
			}
			.active{
				.name{
					color:#1783dd;
				}
			}
		}
		.main-content{
			width:100%;
			box-sizing:border-box;
			padding:20rpx 30rpx;
			padding-right:0;
			padding-top:0;
			padding-bottom:30rpx;
			background:#ffffff;
			margin-top:0rpx;
			.news-main{
				width:100%;
				.news-content{
					width:100%;
					box-sizing:border-box;
					padding-left:0rpx;
					.news-item{
						width:100%;
						border-bottom: 1px #d0d0d0 dashed;
						padding-bottom:20rpx;
						padding-top:20rpx;
						.name{
							width:95%;
							display:block;
							line-height:40rpx;
							font-size:30rpx;
							color:#555555;
							
						}
						.time{
							width:100%;
							display:block;
							line-height:40rpx;
							font-size:28rpx;
							color:#999999;
							overflow:hidden;
							margin-top:10rpx;
							text-overflow:ellipsis;
							white-space:nowrap;
						}
						.time:before{
							color:#1783dd;
							font-size:40rpx;
							margin-right:10rpx;
							position:relative;
							top:4rpx;
						}
						.iconzuozhe:before{
							font-size:36rpx;
						}
					}
					.news-item:last-child{
						border:0;
					}
				}
				.news-top{
					width:100%;
					height:70rpx;
					background:#fbdcdc;
					box-sizing:border-box;
					padding:0 40rpx;
					line-height:70rpx;
					font-size:30rpx;
					color:#d01515;
				}
				.news-top:before{
					margin-right:16rpx;
					font-size:34rpx;
				}
			}
		}
		.scroll-menu{
			width:100%;
			box-sizing:border-box;
			height:70rpx;
			overflow: hidden;
        	white-space: nowrap;
        	border-bottom:1px solid #e6e6e6;
			.uni-scroll-view-content{
				display:flex;
			}
			.item{
				line-height:70rpx;
				width:170rpx;
				text-align:center;
				position:relative;
				color:#555555;
				font-size:30rpx;
				height:70rpx;
				display: inline-block;
			}
			.active{
				color:#1783dd;
			}
			.active:after{
				content:'';
				position:absolute;
				width:60%;
				left:20%;
				bottom:4rpx;
				height:6rpx;
				background:#1783dd;
			}
		}
		.title{
			width:100%;
			line-height:50rpx;
			margin-top:30rpx;
			font-size:36rpx;
			font-weight:600;
			color:#444444;
			text-align:center;
			padding:0 40rpx;
			box-sizing:border-box;
		}
		.img{
			width:100%;
			margin:0 auto;
			display:block;
			height:400rpx;
		}
		.content{
			width:100%;
			box-sizing:border-box;
			padding:0 40rpx;
			line-height:40rpx;
			color:#666666;
			font-size:30rpx;
			margin-top:20rpx;
		}
	}
</style>
